<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>支付</title>
		<!-- Bootstrap -->
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/sticky-footer-navbar.css" />
		<link rel="stylesheet" href="../css/order.css" />
		<link rel="stylesheet" href="../css/index.css" />
    	<link rel="stylesheet" href="../css/normalize.css">
    	<link rel="stylesheet" href="../css/style1.css" media="screen" type="text/css" />
			<style>
body {
  background: #060e1b;
  overflow: hidden;
 
}

canvas {
position:absolute;
  //opacity: 0.5;
  z-index:-1;
}
    	</style>


		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
	<canvas id="canvas"></canvas>
<script>
"use strict";

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1200;

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 12;
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 900000;
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.8;
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}

animation();
</script>
	<jsp:include page="/orderServlet"></jsp:include>
		<!--导航-->
		<nav class="navbar navbar-inverse  navbar-fixed-top" id="nav">
			<div class="container">
				<nav class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand">M-SS网上商城</a>
				</nav>
				<div class="collapse navbar-collapse" id="myNavbar" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">首页</a></li>
						<li><a href="#">功能1</a></li>
						<li><a href="#">功能2</a></li>
						<li><a href="#">功能3</a></li>
						<li><a href="#">功能4</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-responsive-collapse navbar-right">
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <c:if test="${MyUser eq null }">我的账户</c:if><c:if test="${MyUser ne null }">${MyUser.username }</c:if> <span class="caret"></span></a>
							<c:if test="${MyUser eq null }">
								<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/login.jsp">登录</a></li>
						        	<li><a href="${pageContext.request.contextPath }/register.jsp">注册</a></li>   
					          	</ul>
				          	</c:if>
				          	<c:if test="${MyUser ne null }">
					          	<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/user/userinfo.jsp">我的信息</a></li>
						        	<li><a href="${pageContext.request.contextPath }/user/order.jsp">我的订单</a></li>   
						        	<li><a href="${pageContext.request.contextPath }/exitServlet">退出</a></li>   
					          	</ul>
			          		</c:if>
						</li>
						<li>
							<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right hidden-sm">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="搜索商品"  id="serch"/>
						</div>
						<button type="submit" class="btn btn-success">搜索</button>
					</form>
				</div>
			</div>
		</nav>
		<!--导航-->

		<!--订单-->
		<div class="container" style="margin-top: 60px;" id="order">
			<div class="panel panel-success" id="quan">
				<div class="panel-heading" id="biao">
					<h3 class="panel-title"><span >我的订单</span></h3>
				</div>
				<c:forEach items="${orderInfo }" var="orderInfo">
					<div class="panel-body">
						<div class="panel panel-danger">
							<div class="panel panel-heading">
								<!--订单总信息-->
								<table class="table table-condensed" style="margin-bottom: 0; background-color: #f2dede;">
									<tr class="danger" style="font-size: 10px;">
										<th class="pull-left">${orderInfo.orderHader.order_date }</th>
										<th class="pull-left">订单号: ${orderInfo.orderHader.order_id }</th>
										<th class="pull-left">总价: <span class="glyphicon glyphicon-yen"></span> ${orderInfo.orderHader.all_price }</th>
										<div class="clearfix"></div>
									</tr>
								</table>
							</div>
							<c:forEach items="${orderInfo.orDerBody }" var="order">
							<div class="panel-body">
								<!--订单详情-->
								<table class="table table-condensed" style="margin-bottom: 0;">
									<table class="table table-hover table-striped">
										<tr style="t">
											<td><img src="../img/${order.goods_pic }" alt="" style="max-height: 80px;" /></td>
											<td style="line-height: 80px;">商品名: ${order.goods_name }</td>
											<td style="line-height: 80px;">${order.goods_price }</td>
											<td style="line-height: 80px;">${order.cart_quantity }</td>
											<td style="line-height: 80px;">${order.all_price }</td>
										</tr>
									</table>
								</table>
							</div>
							</c:forEach>
						</div>
					</div>
				</c:forEach>
				<div class="panel-footer" id="quan">
					<span class="glyphicon glyphicon-print pull-right text-danger"> <span class="text-danger"> 打印订单</span></span>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>

		<footer class="container-fluid panel-footer text-center footer">
			<p>网上商城 Copyright</p>
		</footer>

		<!--内容-->
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="../js/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="../js/bootstrap.min.js"></script>
	</body>

</html>